<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnObject</title>
    <style>
        h2 {
            text-align: center;
        }

        .input,
        .btn {
            text-align: center;
            margin: 20px 0;
        }

        .show table {
            margin: auto;
        }

        .show table th,
        .show table tr {
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h2>图书商城系统</h2>
    <div class="input">
        书名：<input type="text" class="bookName">
        作者：<input type="text" class="author">
        价格：<input type="text" class="price">
        数量：<input type="text" class="count">
    </div>
    <div class="btn">
        <button id="add">添加</button>
        <button id="query">查询</button>
    </div>
    <hr>
    <div class="show">
        <table cellspacing='0' border='1' class="showInfo">

        </table>
    </div>


    <script>
        var bookName = document.querySelector('.bookName');
        var author = document.querySelector('.author');
        var price = document.querySelector('.price');
        var count = document.querySelector('.count');
        var addBtn = document.querySelector('#add');
        var queryBtn = document.querySelector('#query');
        var showInfo = document.querySelector('.showInfo');
        var books = [];

        addBtn.onclick = function () {
            books.push({
                bookName: bookName.value,
                author: author.value,
                price: price.value,
                count: count.value
            });
            bookName.value = '';
            author.value = '';
            price.value = '';
            count.value = '';
            alert('添加成功！')
        }
        var str = '';
        queryBtn.onclick = function () {
            str = '<tr>\
                <th>书名</th>\
                <th>作者</th>\
                <th>价格</th>\
                <th>数量</th>\
                </tr>';
            for (let i = 0; i < books.length; i++) {
                str += '<tr>\
                    <td>' + books[i].bookName + '</td>\
                    <td>' + books[i].author + '</td>\
                    <td>' + books[i].price + '</td>\
                    <td>' + books[i].count + '</td>\
                    </tr>';
            }
            showInfo.innerHTML = str;
        }


        var obj = {
            name: 'luojianming',
            age: 18,
            skill: function () {
                return 'programming';
            }
        };
        console.log();
        // Object.keys(),Object.values(),Object.entries()方法获取对象属性，值，键值对
        console.log(obj.skill());
        var keys = Object.keys(obj);
        console.log(keys)
        var values = Object.values(obj);
        console.log(values);
        var entries = Object.entries(obj);
        console.log(entries);

        // in 检查对象是否包含一个属性（true，false）
        console.log('name' in obj);
        console.log('love' in obj);

        // for...of...遍历对象所有属性
        for (let i of Object.keys(obj)) {
            console.log(i, obj[i]);
        }

        var person = [
            { name: '小米', age: 25, salary: 9000 },
            { name: '小明', age: 21, salary: 20000 },
            { name: '小龙', age: 21, salary: 12000 },
            { name: '小金', age: 28, salary: 10000 }
        ];
        person.sort(function (a, b) {
            if (a.age == b.age) {
                return b.salary - a.salary;
            }
            return a.age - b.age;
        })
        console.log(person);

        // *******Math对象*******
        // Math.random() 随机函数[0,1)
        console.log(Math.random() * 10);
        // Math.floor() 向下取整
        console.log(Math.floor(3.9));
        // ceil() 向下取整
        console.log(Math.ceil(3.1));
        // Math.round() 四舍五入取整
        console.log(Math.round(3.49999));
        // pow() 求幂数  例：5的3次方
        console.log(Math.pow(5, 3))
        // max() 最大值
        console.log(Math.max(22, 43, 99));
        // min() 最小值
        console.log(Math.min(22, 43, 99));
        // abs()求绝对值
        console.log(Math.abs(-88));
        // sqrt()求平方根 开根号
        console.log(Math.sqrt(4));


        // ******Date对象******
        var now = new Date();
        console.log(now);
        console.log(now.getTime());
        console.log(now.getYear());
        //得到年份四位数
        console.log(now.getFullYear());
        // 得到月份(0~11),加1才能得到现在月份
        console.log(now.getMonth() + 1);
        // 得到日期
        console.log(now.getDate());
        // 得到星期几(0~6) 0是星期日
        console.log(now.getDay());
        // 得到小时(0~23)
        console.log(now.getHours());
        // 得到分钟(0~59)
        console.log(now.getMinutes());
        // 得到秒数(0~59)
        console.log(now.getSeconds());
        // 根据本地时间格式，把 Date 对象转换为字符串。
        console.log(now.toLocaleString());
        // 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
        console.log(now.toLocaleTimeString());
        // 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
        console.log(now.toLocaleDateString());


        var date1 = new Date(1949 / 10 / 01); //1970年以前的日期这样定义无效，只会显示1970/01/01
        // 1970 年以前得这样设置
        date1.setFullYear(1949);
        date1.setMonth(9);
        date1.setDate(1);
        var t = now - date1;
        var years = 365 * 24 * 60 * 60 * 1000;
        console.log("中华人民共和国建国" + t / years + "周年");



        // 全局函数
        // Number(obj) 没有参数返回0
        var str = '20.231';
        console.log(Number(str));
        // parseInt(string，radix)
        console.log(parseInt()); //无参数时返回NAN
        console.log(parseInt(str, 10))
        console.log(parseInt(1010, 2))
        console.log(parseInt(1010, 8))
        console.log(parseInt(1010, 16))
        // parseFloat(string); 无参数时返回NAN
        console.log(parseFloat(str));




    </script>
</body>

</html>